<template>
  <div id="course-reach-info">
    <div class="screen">
      <div
        class="back-btn"
        @click="goBack()"
      >
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span>返回</span>
      </div>
      <span class="label">达成度统计：</span>
      <el-select
        v-model="reachId"
        placeholder="选择达成度统计"
        @change="selectReach"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>
      <span class="course-name">课程名称：{{ info.courseName }}</span>
      <div class="update-info">
        <span>数据统计截至 {{ info.jobExeTime ? info.jobExeTime : '暂未更新' }}</span>
        <span
          v-if="!loading"
          class="update-btn"
          @click="updateData"
        >
          <i class="iconfont icon-refresh"></i>
          手动更新
        </span>
        <span
          v-else
          class="update-btn"
        >
          <i class="el-icon-loading"></i>
          正在更新
        </span>
      </div>
    </div>

    <ul class="card">
      <li
        class="card-item item1"
        @click="setInfo(1)"
      >
        <div class="ca-left">
          <div class="title">{{ info.name }}</div>
          <div class="editor">
            <span>达成度统计名称</span>
            <img
              src="@/assets/img/statistics/editor.png"
              alt=""
            >
          </div>
        </div>
        <div class="ca-right">
          <i class="iconfont icon-tongji3"></i>
        </div>
      </li>
      <li
        class="card-item item2"
        @click="setInfo(2)"
      >
        <div class="ca-left">
          <div class="reach">
            <span class="first">{{ (info.score === undefined || info.score === null) ? '暂无成绩' : info.score }}</span>
            <span class="last">/{{info.thresholdValue }}</span>
          </div>
          <div class="editor">
            <span>成绩/达成度阈值</span>
            <img
              src="@/assets/img/statistics/editor.png"
              alt=""
            >
          </div>
        </div>
        <div class="ca-right">
          <i class="iconfont icon-kechengbaoming"></i>
        </div>
      </li>
      <li
        class="card-item item3"
        @click="setInfo(3)"
      >
        <div class="ca-left">
          <div class="name">{{ info.principal }}</div>
          <div class="editor">
            <span>负责人</span>
            <img
              src="@/assets/img/statistics/editor.png"
              alt=""
            >
          </div>
        </div>
        <div class="ca-right">
          <i class="iconfont icon-renwu1"></i>
        </div>
      </li>
      <li class="card-item item4">
        <div
          class="ca-left"
          @click="$router.push('/zonghe/studentslist?id=' + info.id)"
        >
          <div class="num">{{ info.studentCount }}</div>
          <!-- <router-link
            class="editor"
            tag="div"
            :to="{
                          name: 'studentsList',
                          query: {
                              id: info.id
                      }}"
          > -->
          <div class="editor">
            <span>学生人数</span>
            <img
              src="@/assets/img/statistics/add.png"
              alt=""
            >
          </div>
          <!-- </router-link> -->
        </div>
        <div class="ca-right">
          <i class="iconfont icon-renwu"></i>
        </div>
      </li>
    </ul>

    <courseTarget
      ref="courseTarget"
      :id="reachId"
      :info="info"
    />

    <reachTable
      ref="reachTable"
      :id="reachId"
      :name="info.name"
    />

    <analysisChart
      ref="analysisChart"
      :id="reachId"
    />

    <reachInfoDialog
      ref="reachInfoDialog"
      @update="updateInfo"
    />
  </div>
</template>

<script>
import eventBus from "@/utils/eventBus";
import courseTarget from "./component/courseTarget/index.vue";
import reachTable from "./component/reachTable/index.vue";
import analysisChart from "./component/analysisChart.vue";
import reachInfoDialog from "./component/reachInfoDialog.vue";
import { courseDetails, updateReach } from "@/api/courseReach";

export default {
  components: {
    courseTarget,
    reachTable,
    analysisChart,
    reachInfoDialog,
  },
  data() {
    return {
      reachId: null,
      options: [],
      courseName: "",
      info: {},
      loading: false,
    };
  },
  watch: {
    $route: function () {
      this.init();
    },
  },
  beforeUnmount() {
    eventBus.off("initHub", this.handleInitHub);
  },
  created() {
    this.init();
    eventBus.on("initHub", this.handleInitHub);
    // eventBus.$on("initHub", () => {
    // this.refresh();
    // });
  },

  methods: {
    init() {
      this.options = JSON.parse(localStorage.getItem("REACHLIST")) || [];
      const { id } = this.$route.params;
      console.log(id, 123123);
      this.reachId = Number(id);
    },
    // 返回
    goBack() {
      this.$router.push({
        path: "/zonghe/zonghelist",
        query: {
          courseId: this.info.courseId,
        },
      });
      // this.$router.go(-1);
    },
    handleInitHub() {
      this.refresh();
    },
    getInfo(id) {
      courseDetails({ id })
        .then((res) => {
          this.info = res.data;
        })
        .catch(() => {});
    },

    selectReach(id) {
      this.$router.push({
        name: "zonghedetails",
        params: { id },
      });
    },

    setInfo(type) {
      this.$refs.reachInfoDialog.init(type, this.info);
    },

    updateInfo(key, val, name) {
      if (key == "name") {
        localStorage.setItem(
          "REACHLIST",
          JSON.stringify(this.options, (k, v) => {
            if (k == key) {
              if (name == v) {
                return val;
              }
            }
            return v;
          })
        );
      }

      if (key == "thresholdValue") {
        this.$refs.reachTable.init();
      }

      this.options = JSON.parse(localStorage.getItem("REACHLIST")) || [];
      // this.$set(this.info, key, val);
      this.info[key] = val;
    },
    updateData() {
      this.loading = true;
      updateReach({
        concludeId: this.reachId,
      })
        .then((res) => {
          this.loading = false;
          this.$refs.reachTable.init();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    refresh() {
      this.getInfo(this.reachId);
      this.$refs.courseTarget.getList();
      this.$refs.analysisChart.init();
    },
  },
};
</script>
<style lang="scss">
#course-reach-info {
  .screen {
    .el-input__inner {
      width: 260px;
    }

    input::-webkit-input-placeholder {
      color: #bababa;
      font-size: 14px;
    }
    .back-btn {
      width: 86px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #a5beff;
      text-align: center;
      font-size: 14px;
      color: #457aff;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-icon {
        font-size: 14px;
        color: #457aff;
        margin-right: 4px;
      }
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .no-info {
    text-align: center;
    background: #fff;
    padding: 100px 0;
    p {
      margin-top: 15px;
    }

    .el-loading-mask {
      z-index: 1;
    }
  }
}
</style>

<style lang="scss" scoped>
#course-reach-info {
  margin: 0 auto;
  padding-bottom: 244px;
  a {
    text-decoration: none;
  }
  .screen {
    background: #fff;
    height: 72px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
    border-radius: 0 0 5px 5px;
    .el-select {
      width: 260px;
    }
    .label,
    .course-name {
      color: #727272;
    }

    .course-name {
      font-size: 16px;
      margin-left: 26px;
    }

    .update-info {
      margin-left: auto;
      color: #939393;
      font-size: 16px;
      height: 16px;
      .update-btn {
        cursor: pointer;
        color: #385899;
        font-size: 16px;
        margin-left: 21px;
      }
    }
  }

  .card {
    margin-top: 30px;
    display: flex;
    padding-left: 0;
    .card-item {
      cursor: pointer;
      border-radius: 5px;
      height: 100px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
      transition: all 0.2s;
      &:hover {
        transform: translateY(-6px);
      }
    }

    li ~ li {
      margin-left: 20px;
    }

    .item1 {
      flex: 1;
      background: linear-gradient(90deg, #4c93ff, #1dbaf0);
      display: flex;
      padding: 0 10px 0 10px;
      box-sizing: border-box;
      .ca-left {
        flex: 1;
        display: inline-block;
        margin-right: 4px;
        height: 56px;
        position: relative;
        width: 245px;
        padding-top: 22px;
        .title {
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          width: 245px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .editor {
          position: absolute;
          bottom: 0;
          cursor: pointer;
          font-size: 14px;
          color: #fff;
          font-weight: 400;
          span {
            vertical-align: bottom;
            margin-right: 4px;
          }

          img {
            height: 16px;
          }
        }
      }

      .ca-right {
        padding-top: 30px;
        display: inline-block;
        width: 40px;
        .iconfont {
          font-size: 40px;
          color: #fff;
          &::before {
            vertical-align: text-bottom;
          }
        }
      }
    }

    .item2 {
      // width: 310px;
      flex: 1;
      background: linear-gradient(90deg, #ff908a, #ff6c88);
      display: flex;
      padding: 0 10px;
      box-sizing: border-box;
      .ca-left {
        flex: 1;
        margin-right: 20px;
        height: 56px;
        position: relative;
        padding-top: 22px;
        .reach {
          color: #fff;
          .first {
            font-size: 24px;
            font-weight: bold;
          }
          .last {
            font-size: 18px;
            font-weight: bold;
          }
        }

        .editor {
          position: absolute;
          bottom: 0;
          cursor: pointer;
          font-size: 14px;
          color: #fff;
          font-weight: 400;
          span {
            vertical-align: bottom;
            margin-right: 4px;
          }

          img {
            height: 16px;
          }
        }
      }

      .ca-right {
        width: 40px;
        flex-shrink: 0;
        padding-top: 30px;
        .iconfont {
          font-size: 40px;
          color: #fff;
          &::before {
            vertical-align: text-bottom;
          }
        }
      }
    }

    .item3 {
      flex: 1;
      background: linear-gradient(90deg, #10bdd8, #37cdc0);
      display: flex;
      padding: 0 10px;
      box-sizing: border-box;
      .ca-left {
        flex: 1;
        height: 56px;
        position: relative;
        padding-top: 22px;
        .name {
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .editor {
          position: absolute;
          bottom: 0;
          cursor: pointer;
          font-size: 14px;
          color: #fff;
          font-weight: 400;
          span {
            vertical-align: bottom;
            margin-right: 4px;
          }

          img {
            height: 16px;
          }
        }
      }

      .ca-right {
        width: 46px;
        flex-shrink: 0;
        padding-top: 24px;
        .iconfont {
          font-size: 48px;
          color: #fff;
          &::before {
            vertical-align: text-bottom;
          }
        }
      }
    }

    .item4 {
      flex: 1;
      background: linear-gradient(90deg, #6186ff, #8b49e8);
      display: flex;
      padding: 0 10px;
      box-sizing: border-box;
      .ca-left {
        flex: 1;
        margin-right: 20px;
        height: 56px;
        position: relative;
        padding-top: 22px;
        .num {
          color: #fff;
          font-size: 24px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .editor {
          position: absolute;
          bottom: 0;
          width: 90px;
          cursor: pointer;
          font-size: 14px;
          color: #fff;
          font-weight: 400;
          span {
            vertical-align: bottom;
            margin-right: 4px;
          }

          img {
            position: relative;
            top: 2px;
            height: 22px;
          }
        }
      }

      .ca-right {
        width: 65px;
        flex-shrink: 0;
        padding-top: 22px;
        text-align: right;
        .iconfont {
          font-size: 56px;
          color: #fff;
          &::before {
            vertical-align: text-bottom;
          }
        }
      }
    }
  }
}
</style>
